<template>
	<div id="gameTop">
		<div class="left">
			<p>距期20171229078截止</p>
			<span>00:00:15</span>
		</div>
		<div class="right">
			<p>第20171229077截止</p>
			<div class='rightBot'>
				<span>0</span>
				<span>3</span>
				<span>2</span>
				<span>1</span>
				<span>5</span>
				<em @click.stop="kaijiang">V</em>
			</div>
		</div>
		<mt-popup v-model="popupVisible" popup-transition="popup-fade">
			<ul class="kaijiangCon">
				<li>第20180105期：<span>1</span><span>2</span><span>3</span><span>4</span><span>1</span></li>
				<li>第20180105期：<span>1</span><span>2</span><span>3</span><span>4</span><span>1</span></li>
				<li>第20180105期：<span>1</span><span>2</span><span>3</span><span>4</span><span>1</span></li>
				<li>第20180105期：<span>1</span><span>2</span><span>3</span><span>4</span><span>1</span></li>
				<li>第20180105期：<span>1</span><span>2</span><span>3</span><span>4</span><span>1</span></li>
			</ul>
		</mt-popup>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				popupVisible: false
			}
		},
		created () {

		},
		methods: {
			kaijiang () {
				this.popupVisible = !this.popupVisible
			}
		},
		components: {
		}
	}
</script>

<style lang="less" scoped>
	#gameTop {
		display: inline-block;
		width: 100%;
		background-color: #fff;
		.left, .right {
			float: left;
			width: 50%;
			padding: 1.2rem 0;
			font-size: 12px;
		}
		.left {
			box-shadow: 1px 0 0 #ccc;
			p, span {
				display: block;
				width: 100%;
				line-height: 2rem;
				text-align: center;
			}
			span {
				color: #f00;
				font-size: 18px;
			}
		}
		.right {
			p {
				display: block;
				width: 100%;
				line-height: 2rem;
				text-align: center;
			}
			.rightBot {
				font-size: 18px;
				text-align: center;
				span, em {
					display: inline-block;
				}
				span {
					color: #f00;
				}
				em {
					font-weight: bold;
					font-style: normal;
				}
			}
		}
		.mint-popup {
			width: 90%;
			top: 20%;
			border: 1px solid #EC2829;
			border-radius: 1rem;
		}
		.kaijiangCon {
			width: 100%;
			padding: 1rem 2rem;
			li {
				border-bottom: 1px dashed #ccc;
				font-size: 16px;
				line-height: 2.4rem;
				span {
					margin-left: 0.5rem;
					color: #EC2829;
				}
			}
		}
	}
</style>
